<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery ui</title>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/widget.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>

<body>
    
    <label for="autocomplete">选择一个编程语言：</label>
    <input id="autocomplete">

    <label for="autocomplete2">选择一个编程语言(简化)：</label>
    <input id="autocomplete2">

    <div id="accordion">
      <h3>部分 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
        Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
        condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
        Nam mi. Proin viverra leo ut odio.</p>
      </div>
      <h3>部分 2</h3>
      <div>
        <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
        Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
        faucibus interdum tellus libero ac justo.</p>
      </div>
      <h3>部分 3</h3>
      <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
        Quisque lobortis.Phasellus pellentesque purus in massa.</p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
    </div>

    <div id="datepicker"></div>

    <button id="opener">打开对话框</button>
    <div id="dialog" title="对话框标题">我是一个对话框</div>

    <div id="progressbar"></div>
    <p>
      <a href="#" title="锚描述">锚文本</a>
      <input title="输入帮助">
    </p>

    <h3>沿着轴约束运动：</h3>
     
    <div id="draggable" class="draggable ui-widget-content">
      <p>只能垂直拖拽</p>
    </div>
     
    <div id="draggable2" class="draggable ui-widget-content">
      <p>只能水平拖拽</p>
    </div>
     
    <h3>或者在另一个 DOM 元素中约束运动：</h3>
    <div id="containment-wrapper">
      <div id="draggable3" class="draggable ui-widget-content">
        <p>我被约束在盒子里</p>
      </div>
     
      <div class="draggable ui-widget-content">
        <p id="draggable5" class="ui-widget-header">我被约束在父元素内</p>
      </div>
    </div>

    <script src="js/widget.js"></script>
</body>

</html>